<template>
  <div v-show="isShowActionBox" className="action-box">
    <el-popover ref="popoverRef" placement="right" trigger="hover">
      <template #reference>
        <div class="action-item">
          <img src="@/assets/images/production/zindex.png" alt=""> 图层切换
        </div>
      </template>
      <div class="zindex-container">
        <div @click="handleClickUp">上移一层</div>
        <div @click="handleClickDown">下移一层</div>
        <div @click="handleClickTop">置顶</div>
        <div @click="handleClickBottom">置底</div>
      </div>
    </el-popover>
    <div class="action-item" @click="handleClickDeleteShape">
      <img src="@/assets/images/production/delete.png" alt=""> 删除图像
    </div>
  </div>
</template>
<script lang="ts" setup>
import { ref, defineExpose } from 'vue';
import { handleClickUp, handleClickDown, handleClickTop, handleClickBottom, handleClickDeleteShape } from './actionBox.tsx'

const popoverRef = ref()
// 提示框显示隐藏变量
const isShowActionBox = ref(false)
// 提示框的 top 值
const actionBoxTop = ref('0px')
// 提示框的 left 值
const actionBoxLeft = ref('0px')
// 显示操作框并设置top和left值
function setActionBoxShow(top: number, left: number):void{
  isShowActionBox.value = true
  // 提示框的 top 值
  actionBoxTop.value = `${top}px`
  // 提示框的 left 值
  actionBoxLeft.value = `${left}px`
}
// 隐藏操作框
function setActionBoxHidden(){
  isShowActionBox.value = false
  // 提示框的 top 值
  actionBoxTop.value = `${0}px`
  // 提示框的 left 值
  actionBoxLeft.value = `${0}px`
  popoverRef.value.hide()
}
defineExpose({
  setActionBoxShow,
  setActionBoxHidden
})
</script>

<style lang="less" scoped>
.action-box{
  position: fixed;
  padding: 10px;
  background-color: #fff;
  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, .3);
  border-radius: 10px;
  top: v-bind(actionBoxTop);
  left: v-bind(actionBoxLeft);
  transform-origin: top left;
  z-index: 1100;
  .action-item{
    cursor: pointer;
    color: #1c3067;
    height: 42px;
    display: flex;
    align-items: center;
    img{
      width: 20px;
      height: 20px;
      margin-right: 10px;
    }
  }
}
.zindex-container{
  text-align: center;
  div{
    height: 30px;
    line-height: 30px;
    cursor: pointer;
    color: #1c3067;
    border-radius: 10px;
    &:hover{
      background-color: #1c306750;
    }
  }
}
</style>